Prepararsi alle modalità di visualizzazione di domani

Le PWA possono utilizzare la proprietà "display_override" per gestire modalità di visualizzazione speciali.

Thomas Steiner

Un manifest dell'app web è un file JSON che indica al browser la tua app web progressiva e il suo comportamento quando è installata sul dispositivo mobile o desktop dell'utente. Tramite la proprietà display, puoi personalizzare l'interfaccia utente del browser visualizzata al momento dell'avvio dell'app. Ad esempio, puoi nascondere la barra degli indirizzi e la barra del browser. I giochi possono anche essere avviati a schermo intero. Di seguito sono riportate le modalità di visualizzazione specificate al momento della stesura di questo articolo.

Proprietà Utilizzo
fullscreen Apre l'applicazione web senza interfaccia utente del browser e occupa interamente l'area di visualizzazione disponibile.
standalone L'app web si apre con un aspetto simile a quello di un'app autonoma. L'app viene eseguita in una finestra separata dal browser e nasconde gli elementi dell'interfaccia utente del browser standard, come la barra degli URL.
minimal-ui Questa modalità è simile a standalone, ma fornisce all'utente un insieme minimo di elementi dell'interfaccia utente per controllare la navigazione (ad esempio Indietro e Ricarica).
browser Un'esperienza di browser standard.

Queste modalità di visualizzazione seguono una catena di riserva ben definita ("fullscreen" → "standalone" → "minimal-ui" → "browser"). Se un browser non supporta una determinata modalità, passa alla modalità di visualizzazione successiva della catena.

Mancanza di funzionalità della proprietà display

Il problema di questo approccio di catena di riserva cablata è triplice:

  • Uno sviluppatore non può richiedere "minimal-ui" senza essere costretto a tornare alla modalità di visualizzazione "browser" nel caso in cui "minimal-ui" non sia supportato da un determinato browser.
  • Gli sviluppatori non hanno modo di gestire le differenze tra browser, ad esempio se il browser include o esclude un pulsante Indietro nella finestra per la modalità "standalone".
  • Il comportamento attuale rende impossibile introdurre nuove modalità di visualizzazione in modo compatibile con le versioni precedenti, poiché esplorazioni come la modalità di applicazione a schede non hanno un ruolo naturale nella catena di riserva.

La proprietà display_override

Questi problemi vengono risolti dalla proprietà display_override, che il browser prende in considerazione prima della proprietà display. Il suo valore è una sequenza di stringhe considerate in ordine e viene applicata la prima modalità di visualizzazione supportata. Se non sono supportati, il browser ricorre alla valutazione del campo display.

Nell'esempio seguente, la catena di riserva della modalità di visualizzazione è la seguente. I dettagli di "window-controls-overlay" non rientrano nell'ambito di questo articolo.

  1. "window-controls-overlay" (Innanzitutto, consulta display_override.)
  2. "minimal-ui"
  3. "standalone" (quando display_override è esaurito, valuta display).
  4. "minimal-ui" (Infine, utilizza la catena di riserva display).
  5. "browser"
{
  "display_override": ["window-controls-overlay", "minimal-ui"],
  "display": "standalone",
}

Per mantenere la compatibilità con le versioni precedenti, qualsiasi modalità di visualizzazione futura sarà accettabile solo come valore di display_override, ma non di display. I browser che non supportano display_override utilizzano la proprietà display e ignorano display_override come proprietà manifest dell'app web sconosciuta.

Riconoscimenti

La proprietà display_override è stata formalizzata da Daniel Murphy.